<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20" src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png"></image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">个人中心</text>
				</view>
				<view class="setting-mess">
					<view class="setting" @click="onSetting">
						<text class="iconfont icon-shezhi" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
				</view>
			</view>
			<!-- 用户信息 登陆显示 -->
			<view class="user-info" v-if="mobile">
				<view class="portrait">
					<image style="width: 64px; height: 64px; background-color: #eeeeee;border-radius: 25px;" :src="avatar"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{nickName}}</text>
					</view>
				</view>
			</view>
		  <!-- 未登录显示 -->
		  <view class="user-info" v-else @click="toLogin">
			<view class="portrait">
			  <image src="/static/img/logo.png"></image>
			</view>
			<view class="info">
			  <view class="nickname">
				<text>登录/注册</text>
			  </view>
			</view>
		  </view>
		</view>
		<!-- 实用功能 -->
		<view class="my-service">
			<view class="service-list">
				<view class="list" @click="toCollect()">
					<view class="thumb">
						<image src="/static/img/my/collect.png"></image>
					</view>
					<view class="name">
						<text>我的收藏</text>
					</view>
				</view>
				<view class="list" @click="toFootprint()">
					<view class="thumb">
						<image src="/static/img/my/footprint.png"></image>
					</view>
					<view class="name">
						<text>我的足迹</text>
					</view>
				</view>
				<view class="list" @click="toSignIn()">
					<view class="thumb">
						<image src="/static/img/my/signIn.png"></image>
					</view>
					<view class="name">
						<text>签到</text>
					</view>
				</view>
				
				<view class="list" @click="toHelp()">
					<view class="thumb">
						<image src="/static/img/my/help.png"></image>
					</view>
					<view class="name">
						<text>帮助</text>
					</view>
				</view>
				<view class="list" @click="upgrade">
					<view class="thumb">
						<image src="/static/img/my/update.png"></image>
					</view>
					<view class="name">
						<text>检测更新</text>
					</view>
				</view>
				<view class="list" @click="toContact()">
					<view class="thumb">
						<image src="/static/img/my/customerSevice.png"></image>
					</view>
					<view class="name">
						<text>联系我们</text>
					</view>
				</view>
				<view class="list" @click="toFeedback()">
					<view class="thumb">
						<image src="/static/img/my/feedback.png"></image>
					</view>
					<view class="name">
						<text>意见反馈</text>
					</view>
				</view>
				<view class="list" @click="toShare()">
					<view class="thumb">
						<image src="/static/img/my/share.png"></image>
					</view>
					<view class="name">
						<text>分享软件</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 检测更新 -->
		<view class="download">
		  <uni-popup ref="popup" type="center">
			<view class="upgrade">
			  <view class="logo">
				<image src="/static/img/upgrade.png" mode="widthFix" />
			  </view>
			  <view class="content">
				<view class="title">
				  <text>{{upgrading?"正在升级":"发现新版本"+versionStr}}</text>
				</view>
				<view class="container">
				  <view class="descriptions">
					<text>{{upgrading?"正在为您下载,请耐心等待":"本次版本更新描述内容:"}}</text>
				  </view>
				  <view class="details" v-if="!upgrading">
					<view class="item" v-for="(item , index) of 3" :key="item">
					  <text>{{index + 1}} . 修复bug {{item}}{{item == 1?',修复了遗留问题购物车数据格式显示问题,解决了XXXXX号问题.':''}}</text>
					</view>
				  </view>
				  <view v-else class="prpgroess">
					<progress
					  :percent="downloadTime"
					  active-mode="forwards"
					  activeColor="red"
					  active
					  stroke-width="4"
					  show-info
					/>
				  </view>
				</view>
				<view v-if="!upgrading" class="btn-group">
				  <view class="cancel" @click="hiddenUppop">
					<text>取消</text>
				  </view>
				  <view class="confirm" @click="upgradeEvent">
					<text>确定</text>
				  </view>
				</view>
				<view v-else class="btn-group">
				  <view v-if="!isForceUpgrade" class="cancel" @click="abortDownload">
					<text>取消下载</text>
				  </view>
				  <view v-if="!isForceUpgrade" class="confirm" @click="hiddenUpgradeEvent">
					<text>后台下载</text>
				  </view>
				</view>
			  </view>
			</view>
		  </uni-popup>
		</view>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
	import Vue from "vue";
	import uniPopup from "../../components/uni-popup/uni-popup.vue";
	import uniPopupMessage from ".../../components/uni-popup/uni-popup-message.vue";
	import uniPopupDialog from ".../../components/uni-popup/uni-popup-dialog.vue";
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		data() {
			return {
				mobile:'',
				//用户头像
				avatar:'',
				//验证码
				code:'',
				//用户昵称
				nickName:'',
				//今日预估		
				todayEstimate:0,
				//昨日预估
				yesterdayEstimate:0,
				//本月预估
				thisMonthEstimate:0,
				//上月预估
				firstMonthEstimate:0,
				//我的积分
				myIntegral:0,
				//我的余额
				myBalance:0,
				scrollTop: 0,
				isHotline: false,
				// 版本代码
				versionCode: 28,
				// 版本字符串
				versionStr: "1.0.0530",
				// 是否更新
				upgrading: false,
				// 下载时间
				downloadTime: 0,
				// 定时器
				timer: null,
				// 是否强制更新
				isForceUpgrade: false,
				// 下载任务
				downloadTask: null,
				// 下载地址
				downloadUrl: "",
			};
		},
		onShow(){
			//判断是否存在token
			debugger
			console.info(this.$store.state.vuex_token);
			console.info(this.$store.state.vuex_user.mobile)
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.avatar)){
				this.avatar = this.$store.state.vuex_user.avatar;
			}
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.code)){
				this.code = this.$store.state.vuex_user.code;
			}
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.nickName)){
				this.nickName = this.$store.state.vuex_user.nickName;
			}
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.mobile)){
				this.mobile = this.$store.state.vuex_user.mobile;
			}
			if(this.$utils.isNotEmpty(this.$store.state.vuex_token)){
				debugger
				this.$u.api.check().then((res) => {
					if(res.code == 200){
						// this.isLogin = true;
						// this.userAvatar = vm.vuex_user.userAvatar;
						// this.code = vm.vuex_user.code;
						// this.nickName = vm.vuex_user.nickName;
					}
				})
			}
		},
		onReady() {
				
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			//我的足迹
			toFootprint(){
				uni.navigateTo({
					url: '/pages/my/common/footprint'
				})
			},
			//签到
			toSignIn(){
				uni.navigateTo({
					url: '/pages/my/common/signIn'
				})
			},
			//我的收藏
			toCollect(){
				uni.navigateTo({
					url: '/pages/my/common/collect'
				})
			},
			//帮助
			toHelp(){
				uni.navigateTo({
					url: '/pages/my/help/help'
				})
			},
			//联系我们
			toContact(){
				uni.navigateTo({
					url: '/pages/my/common/customerSevice'
				})
			},
			//意见反馈
			toFeedback(){
				uni.navigateTo({
					url: '/pages/my/common/feedback'
				})
			},
			//分享软件
			toShare(){
				uni.navigateTo({
					url: '/pages/my/common/share'
				})
			},
			//设置
			onSetting(){
				uni.navigateTo({
					url: '/pages/my/setting/setting'
				})
			},
			//会员申请
			onApplyVip(){
				uni.navigateTo({
					url: '/pages/login/login',
				})
			},
			//去登陆  
			toLogin(){
				uni.navigateTo({
				  url: '/pages/login/login'
				})
			},
			// 取消更新
			hiddenUppop() {
			  this.$refs.popup.close();
			},
			// 检测更新
			upgrade() {
				// #ifdef APP-PLUS
				  // TODO:
				  // 这里可以使用ajax请求后台
				  // 如果有新版本就更新
				  // 如果没有新版本就不更新,并弹出提示
				  let hasNewVersion = true;
				  if (hasNewVersion) {
					this.$refs.popup.open();
				  } else {
					uni.showToast({
					  title: "恭喜您的应用是最新版本!",
					  duration: 2000,
					  icon: "none",
					});
					// 这是5+sdk调用原生的toast,如果你不喜欢上面的,那么把上面注释或者删除,使用这个,
					// 里面的消息可以自定义
					/**
					 * plus.nativeUI.toast("恭喜您的应用是最新版本!");
					 */
				  }
				// #endif
				// #ifdef  H5
					this.$refs.uToast.show({
						title: '仅支持APP下更新',
						type: 'error'
					})
				// #endif
			},
			// 点击更新
			upgradeEvent() {
			  if (!this.upgrading) {
			    let versionInfo = this.getVersionAndPlatform();
			    console.log(versionInfo);
			    // 如果是正式更新需要打开下面这行注释
			    // 这里只是做了简单的判断
			    // 这里可以更据平台来下载
			    // -------------------------
			    // if (versionInfo) {
			    // -------------------------
			    // 注意这里逻辑需要自己去组织一下
			    // 如果是iOS
			    // 调用第三方程序打开指定的URL
			    // -------------------------
			    //  plus.runtime.openURL( url, errorCB, identity );
			    // -------------------------
			    this.upgrading = true;
			    // 如果是强制更新
			    this.isForceUpgrade = false;
			    // 这里是模拟更新
			    this.timer = setInterval(() => {
			      this.downloadTime++;
			      if (this.downloadTime >= 100) {
			        this.downloadTime = 0;
			        if (this.$refs.popup) {
			          this.$refs.popup.close();
			
			          setTimeout(() => {
			            this.upgrading = false;
			          }, 200);
			        }
			
			        clearInterval(this.timer);
			      }
			    }, 1000);
			    // 注意：
			    // 支持以下类型安装包：
			    // 1. 应用资源安装包（wgt），扩展名为'.wgt'；
			    // 2. 应用资源差量升级包（wgtu），扩展名为'.wgtu'；
			    //  3. 系统程序安装包（apk），要求使用当前平台支持的安装包格式。
			    // 注意：仅支持本地地址，调用此方法前需把安装包从网络地址或其他位置放置到运行时环境可以访问的本地目录。
			    // 这是5+sdk install 的地址 : http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.install
			    // -----------------------
			    // 正式下载请打开这里的注释
			    // this.downloadApplications();
			    // }
			    // -----------------------
			  }
			},
			// 后台下载
			hiddenUpgradeEvent() {
			  this.$refs.popup.close();
			},
			// 检测平台和当前app版本号
			getVersionAndPlatform() {
			  // 这里try-catch是因为，当前代码是在浏览器上调试的
			  // 由于浏览器不支持所以加了try-catch
					// 你也可以加这个玩意
					// #ifdef APP-PLUS
					
					// #endif
			  // 你可以删除
			  try {
			    // 获取版本号
			    let version = plus.runtime.version;
			    // 获取当前平台
			    // - Android
			    // - Ios
			    // 两种平台
			    let platform = plus.os.name;
			    return {
			      version: version,
			      platform: platform,
			    };
			  } catch {
			    console.error("当前平台不支持5+SDK!");
			  }
			},
			// 下载
			downloadApplications() {
			  // 建立下载任务
			  this.downloadTask = uni.downloadFile({
			    // 下载地址
			    url: this.downloadUrl,
			    success: (res) => {
			      if (res.statusCode === 200) {
			        // 把当前app保存下载
			        uni.saveFile({
			          tempFilePath: res.tempFilePath,
			          success: (resp) => {
			            // 保存成功
			            var savedFilePath = resp.savedFilePath;
										const installPath =  plus.io.convertLocalFileSystemURL( savedFilePath );
			            // 安装
			            this.installApplications({
			              filePath: installPath,
			              success: (res) => {
			                console.info(res);
			              },
			              error: (err) => {
			                console.log(err);
			              },
			            });
			          },
			          fail: (err) => {
			            // 保存失败
			            console.error(err);
			          },
			        });
			      }
			    },
			  });
			
			  this.downloadTask.onProgressUpdate((res) => {
			    // 下载进度
			    this.downloadTime = res.progress;
			    console.log("下载进度" + res.progress);
			    console.log("已经下载的数据长度" + res.totalBytesWritten);
			    console.log("预期需要下载的数据总长度" + res.totalBytesExpectedToWrite);
			  });
			},
			// 取消下载
			abortDownload() {
			  this.downloadTime = 0;
			  if (this.$refs.popup) {
			    this.$refs.popup.close();
			    setTimeout(() => {
			      this.upgrading = false;
			    }, 200);
			  }
			
			  clearInterval(this.timer);
			  if (this.downloadTask) {
			    this.downloadTask.abort();
			  }
			},
			//安装
			installApplications({filePath, success, error}) {
			  plus.runtime.install(
			    filePath,
			    { force: this.isForceUpgrade },
			    success,
			    error
			  );
			},
			  
		}
	}
</script>

<style scoped lang="scss">
.page{
	position: absolute;
	width: 100%;
	// height: 100%;
	padding-bottom: 100rpx;
	//background-color: #f6f6f6;
}
.my-top{
	position: relative;
	width: 100%;
	height: 300rpx;
	/* #ifdef APP-PLUS */
	height: 460rpx;
	/* #endif */
	/* #ifdef MP */
	height: 520rpx;
	/* #endif */
	background: linear-gradient(to left,#fe3b0f,#ff4e17);
	//border-radius: 0 0 50% 50% / 0% 0% 15% 15%;
	overflow: hidden;
	.head{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* #ifdef APP-PLUS */
		height: calc(100rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef MP */
		height: calc(200rpx + var(--status-bar-height));
		padding-top: calc(100rpx + var(--status-bar-height));
		/* #endif */
		background-color: rgba(255,255,255,0);
		// transition: all 1s;
		.portrait{
			display: flex;
			width: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.title{
			display: flex;
			align-items: center;
			text{
				color: #212121;
				font-size: 28rpx;
			}
		}
		.setting-mess{
			display: flex;
			align-items: center;
			height: 100%;
			margin-right: 20rpx;
			.setting{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 100%;
				text{
					color: #FFFFFF;
					font-size: 38rpx;
				}
			}
			.mess{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 100%;
				text{
					color: #FFFFFF;
					font-size: 38rpx;
				}
			}
		}
	}
	/* 用户信息 */
	.user-info{
		display: flex;
		align-items: center;
		padding: 0 5%;
		height: 120rpx;
		margin-top: 100rpx;
		/* #ifdef APP-PLUS */
		margin-top: 130rpx;
		/* #endif */
		/* #ifdef MP */
		margin-top: 200rpx;
		/* #endif */
		.portrait{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
				border: 4rpx solid #FFFFFF;
				box-sizing: border-box;
				position: static;
			}
			.grade{
				display: flex;
				justify-content: center;
				margin-top: -20px;
				width: 61px;
				padding: 0 auto;
				position:relative;
				height: 20px;
				line-height: 20px;
				background-color: yellow;
				border-radius: 15px;
				border: 1px solid #ffffff;				
			}
		}
		.info{
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 70%;
			height: 100%;
			.nickname{
				width: 100%;
				padding: 10rpx 0;
				text{
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}
			.rank{
				display: flex;
				align-items: center;
				width: 120rpx;
				height: 30rpx;
				padding: 0 10rpx;
				border: 2rpx solid #F0AD4E;
				border-radius: 30rpx;
				image{
					width: 24rpx;
					height: 24rpx;
				}
				text{
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}
	}
	/* 关注区 */
	.focus-area{
		display: flex;
		align-items: center;
		width: 100%;
		height: 120rpx;
		.list{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 33%;
			height: 100%;
			.num{
				display: flex;
				align-items: center;
				text{
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.title{
				display: flex;
				align-items: center;
				margin-top: 5rpx;
				text{
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
		}
	}
	/* vip */
	.vip-info{
		position: absolute;
		left: 50%;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 0 4%;
		width: 90%;
		height: 80rpx;
		background-color: #464C5B;
		transform: translate(-50%,0);
		border-radius: 10rpx 10rpx 0 0;
		.vip{
			position: relative;
			display: flex;
			align-items: center;
			width: 20%;
			text{
				color: #ffe678;
				font-size: 26rpx;
			}
			.line{
				position: absolute;
				right: 0;
				top: 40%;
				width: 2rpx;
				height: 20rpx;
				background-color: #ffe678;
			}
		}
		.vip-explain{
			display: flex;
			align-items: center;
			margin: 0 10rpx;
			text{
				color: #ffe678;
				font-size: 24rpx;
			}
		}
		.vip-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140rpx;
			height: 35px;
			margin-top:3px;
			background-color: #ffe678;
			border-radius: 30rpx;
			text{
				font-size: 24rpx;
				color: #464C5B;

			}
		}
	}
}
/* 订单信息 */
.order-info{
	display: flex;
	width: 94%;
	height: 200rpx;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	margin: 20rpx auto;
	.list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 20%;
		height: 100%;
		.icon{
			position: relative;
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 38rpx;
				color: #333333;
			}
			.num{
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				padding: 4rpx;
				font-size: 18rpx;
				color: #fe3b0f;
				border: 2rpx solid #fe3b0f;
				border-radius: 100%;
				background-color: #FFFFFF;
			}
		}
		.title{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			text{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
}
/* 钱包 */
.wallet-info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 94%;
	height: 200rpx;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	margin: 20rpx auto;
	.list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
		height: 100%;
		.icon{
			position: relative;
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 38rpx;
				color: #fe3b0f;
			}
			.number{
				font-size: 28rpx;
				color: #212121;
				font-weight: bold;
			}
		}
		.title{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			text{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
}
/* 签到，付款码 */
.integral-payment{
	display: flex;
	justify-content: space-between;
	width: 94%;
	height: 180rpx;
	margin: 20rpx auto;
	.list{
		width: 48%;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 120rpx;
			.iconfont{
				font-size: 48rpx;
				margin-right: 10rpx;
				font-weight: normal;
			}
			text{
				color: #212121;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.mess{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			text{
				color: #C0C0C0;
				font-size: 26rpx;
			}
		}
	}
}
/* 我的服务 */
.my-service{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin: 20rpx 0;
	.title{
		display: flex;
		align-items: center;
		padding: 0 4%;
		height: 80rpx;
		text{
			font-size: 28rpx;
			font-weight: bold;
			color: #212121;
		}
	}
	.service-list{
		display: flex;
		flex-wrap: wrap;
		.list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 140rpx;
			.thumb{
				width: 40rpx;
				height: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.name{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				text{
					color: #212121;
					font-size: 24rpx;
				}
			}
		}
	}
}
/* 为你推荐 */
.recommend-info{
  width: 100%;
  background-color: #f2f2f2;
  .recommend-title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    .title{
      display: flex;
      align-items: center;
      image{
        width: 416rpx;
        height: 40rpx;
      }
    }
  }
  .goods-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30rpx;
    .list{
      width: 49%;
      height: 540rpx;
      margin-bottom: 20rpx;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      overflow: hidden;
      .pictrue{
        display: flex;
        justify-content: center;
        width: 100%;
        image{
          height: 350rpx;
        }
      }
      .title-tag{
        // display: flex;
        height: 100rpx;
        padding: 20rpx;
        .tag{
          float: left;
          margin-right: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
          font-size: 26rpx;
          line-height: 40rpx;
          text{
            font-size: 24rpx;
            color: #FFFFFF;
            padding: 4rpx 16rpx;
            background: linear-gradient(to right,#fe3b0f,#fc603a);
            border-radius: 6rpx;
            margin-right: 10rpx;
          }
        }
      }
      .price-info{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        height: 80rpx;
        .user-price{
          display: flex;
          align-items: center;
          text{
            color: #FF0000;
          }
          .min{
            font-size: 24rpx;
          }
          .max{
            font-size: 32rpx;
          }
        }
        .vip-price{
          display: flex;
          align-items: center;
          image{
            width: 26rpx;
            height: 26rpx;
            margin-right: 10rpx;
          }
          text{
            color: #fcb735;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

/* 客服热线弹窗 */
.serve-hotline{
	.cu-dialog{
		width: 100%;
		border-radius: 20rpx 20rpx 0 0 !important;
		.contact-list{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				text{
					color: #222222;
					font-size: 32rpx;
				}
			}
		}
	}
}
.download .logo {
  width: 208rpx;
}

.download .upgrade {
  position: relative;
  background: #fff;
  width: 468rpx;
  min-height: 238rpx;
  border-radius: 20rpx;
}
.download .logo image {
  width: 208rpx;
  position: absolute;
  top: -80rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.download .content {
  padding-top: 80rpx;
}
.download .content .title {
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
}

.download .content .container {
  color: #666;
}
.download .content .container .descriptions {
  padding: 0rpx 30rpx;
  text-align: center;
  font-size: 28rpx;
}
.download .content .container .details,
.download .content .prpgroess {
  padding: 16rpx 46rpx;
  box-sizing: border-box;
  font-size: 24rpx;
}
.download .content .prpgroess {
  padding: 16rpx 22rpx;
  margin: 20rpx 0;
}
.download .content .btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.download .content .btn-group view {
  width: 200rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14rpx;
  font-size: 24rpx;
  border-radius: 16rpx;
  line-height: 1.5;
}
.download .content .btn-group view:last-child {
  background: #ef5656;
  color: #fff;
}
</style>
